<li class="timeline-inverted">
  <div class="timeline-badge timeline-badge-small"
       data-ng-class="{
        'success': h.statusValue.type === 'workflow',
        'primary': h.statusValue.type === 'task',
        'info': h.statusValue.type === 'event'}">
    <i class="fa fa-fw"
       data-ng-class="{
        'fa-code-fork': h.statusValue.type === 'workflow',
        'fa-tasks': h.statusValue.type === 'task',
        'fa-edit': h.statusValue.type === 'event'}"
       title="{{(h.statusValue.type + 'Type') | translate}}"></i>
  </div>
  <div class="timeline-panel">
    <div class="timeline-heading">
      <a class="btn btn-link pull-right"
         data-ng-show="allowRemoval"
         data-ng-click="removeStep(h)"
         title="{{'removeHistoryStep' | translate}}">
        <i class="fa fa-trash text-danger"/>
      </a>
      <a data-ng-href="catalog.search#/metadata/{{h.uuid}}"
         data-ng-hide="noTitle"><i>{{h.title}}</i></a>
      <br data-ng-hide="noTitle"/>
      <strong>
        {{h.statusValue.type == 'workflow' ?
        ('recordHistory-workflow' | translate:{text: (h.statusValue.label | gnLocalized)}):
        (h.statusValue.label | gnLocalized | translate:{h: h}) }}
      </strong>
      <span class="text-muted"
            data-gn-humanize-time="{{h.changeDate.dateAndTime}}"
            data-from-now=""></span>

      <span data-ng-if="h.statusValue.type == 'task'" data-ng-show="h.dueDate != null">,
        <span data-translate="">taskDueDate</span>
        <span class="text-muted"
              data-gn-humanize-time="{{h.dueDate.dateAndTime}}"
              data-from-now=""></span>
      </span>
      <span data-ng-if="h.statusValue.type == 'task'" data-ng-show="h.closeDate != null">,
        <span data-translate="">taskCloseDate</span>
        <span class="text-muted"
              data-gn-humanize-time="{{h.closeDate.dateAndTime}}"
              data-from-now=""></span>
      </span><br/>

      <p class="gn-margin-top" data-ng-if="h.changeMessage !== ''">
        {{h.changeMessage}}
      </p>

      <img class="img-circle"
           data-ng-src="../api/users/{{(h.id.userId)}}.png?size=18"/>
      {{h.authorName}}

      <div class="btn-group btn-group-xs pull-right timeline-btn-group" role="group"
          data-ng-if="h.statusValue.type === 'event' &&
          (h.statusValue.id === 51 || h.statusValue.id === 60 || h.statusValue.id === 61 || h.statusValue.id === 63)">

          <a class="btn btn-default"
             target="_blank"
             data-ng-href="../api/records/{{h.uuid}}/status/{{h.statusId}}.{{h.userId}}.{{h.changeDate.dateAndTime}}/before"
             data-ng-if="!h.previousStateEmpty"
             data-ng-hide="noSourceViewOption">
            <i class="fa fa-fw fa-search"
               title="{{'View' | translate}}"></i>
            <span data-translate="">viewPreviousVersion</span>
          </a>

          <a class="btn btn-default"
             target="_blank"
             data-ng-href="../api/records/{{h.uuid}}/status/{{h.statusId}}.{{h.userId}}.{{h.changeDate.dateAndTime}}/after"
             data-ng-if="!h.currentStateEmpty"
             data-ng-hide="noSourceViewOption">
            <i class="fa fa-fw fa-search"
               title="{{'View' | translate}}"></i>
            <span data-translate="">viewChangedVersion</span>
          </a>

          <span class="btn btn-default"
                data-gn-click-and-spin="restoreHistoryElement(h)"
                data-ng-if="!h.previousStateEmpty"
                data-ng-hide="noRecoverOption">
          <i class="fa fa-fw fa-magic"
             title="{{'restore' | translate}}"></i>
          <span data-translate="">restore</span>
        </span>
      </div>
    </div>
    <div class="timeline-body" data-ng-show="h.closeDate == null">

      <div data-ng-show="h.statusValue.name == 'doiCreationTask'"
           data-ng-init="key = h.metadataId + '-' + h.statusId">
        <h2 data-translate="">createDoiForRecord</h2>
        <div class="text-muted" data-translate="">createDoiForRecord-help</div>

        <a class="btn btn-primary"
           data-gn-click-and-spin="doiCreationTask.check(h)">
          <i class="fa fa-fw"
             data-ng-class="{'fa-check': response.doiCreationTask.check == null, 'fa-thumbs-up': response.doiCreationTask.check.status === 200, 'fa-thumbs-down': response.doiCreationTask.check.status === 400}" ></i>
          <span data-translate="">doiCreationTaskCheckAction</span>
        </a>

        <a class="btn btn-primary"
           data-ng-disabled="response.doiCreationTask.check.status !== 200"
           data-gn-click-and-spin="doiCreationTask.create(h)">
          <i class="fa fa-fw fa-play"/>
          <span data-translate="">doiCreationTaskCreateAction</span>
        </a>

        <a class="btn btn-default"
           data-translate=""
           data-ng-show="user.isAdministratorOrMore()"
           data-gn-click-and-spin="closeTask(h)">closeTask</a>

        <div data-ng-if="response.doiCreationTask.check"
             data-ng-class="{'text-danger': response.doiCreationTask.check.status === 400}">
        {{response.doiCreationTask.check.data.description}}
        </div>
        <div data-ng-if="response.doiCreationTask.create"
             data-ng-class="{'text-danger': response.doiCreationTask.create.status === 400}">
          {{response.doiCreationTask.create.data.description}}
        </div>
      </div>
    </div>
  </div>
</li>
